<template>
  <cardBlock>
    <template #default>
      {{ props.data.title ?? "此文章没有标题" }}

      <a-comment
        :author="commentUserInfo?.userName || ''"
        :content="props.data.content"
        :datetime="props.data.updateTime"
      >
        <template #title>{{ props.data.title ?? "" }}</template>
        <template #actions>
          <slot name="actions"></slot>
        </template>
        <template #avatar>
          <a-avatar @click="handleClick">
            <img
              alt="avatar"
              :src="
                commentUserInfo?.picture ??
                `https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp`
              "
            />
          </a-avatar>
        </template>
      </a-comment>
    </template>
  </cardBlock>

  <modal
    title="用户信息"
    :visible="userInfoModalVisible"
    :setVisible="setUserInfoModalVisible"
  >
    <template #default>
      <div class="sub-wrapper">
        <div>用户名：{{ commentUserInfo?.userName }}</div>
        <div>地址 ：{{ commentUserInfo?.location }}</div>
        <a-button type="primary" @click="addFriend">添加好友</a-button>
      </div>
    </template>
  </modal>
</template>

<script lang="ts" setup>
import modal from "@/components/common/modal/index.vue";
import cardBlock from "../card-block/index.vue";
import { ref } from "vue";
import { commonRequest } from "@/utils/request";
import { onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { addFriendById, getUserInfoById } from "@/apis/oldman";

const commentUserInfo = ref(null);
const userInfo = ref(null);

const props = defineProps<{
  data: any;
}>();

const userInfoModalVisible = ref(false);
const setUserInfoModalVisible = (visible: boolean) => {
  userInfoModalVisible.value = visible;
};

const getUerInfo = async () => {
  const id = props.data.userid || props.data.userId;
  const res = await getUserInfoById({ id });
  commentUserInfo.value = res.data;
};

const handleClick = async () => {
  const id = props.data.userid || props.data.userId;
  if (id) {
    if (import.meta.env.VITE_APP_CAR_OR_OLDMAN === "car") {
      const res = await commonRequest.post(
        "/user/select",
        `${props.data.userid}`
      );
      commentUserInfo.value = res.data.date;
    } else {
      const res = await getUserInfoById({ id });
      commentUserInfo.value = res.data;
    }

    setUserInfoModalVisible(true);
  }
};

const addFriend = async () => {
  if (import.meta.env.VITE_APP_CAR_OR_OLDMAN === "car") {
    const data = {
      frienduserid: `${props.data.userid}`,
      userid: `${userInfo.value.id}`,
    };
    if (data.frienduserid === data.userid) {
      Message.error("不能添加自己");
      return;
    }

    const res = await commonRequest.post("/friends/add", data);

    if (res.data.code === 200) {
      Message.success("添加成功");
      setUserInfoModalVisible(false);
    } else {
      Message.error("当前用户已经是好友，添加失败");
    }
  } else {
    const data = {
      id: props.data.userId,
    };

    const res = await addFriendById(data);
    if (res.data.code === 200) {
      Message.success("添加成功");
      setUserInfoModalVisible(false);
    } else {
      Message.error("当前用户已经是好友，添加失败");
    }
  }
};
onMounted(() => {
  const userInfoJSON = localStorage.getItem("userInfo");
  userInfo.value = JSON.parse(userInfoJSON);
  getUerInfo();
});
</script>
<style scoped></style>
